<!-- 忘记密码 -->
<template>
  <view>
    <aster-back />
    <view class="resetpwd">
      <view class="resetpwd-header">
        <text>重置密码</text>
      </view>
      <view>
        <view class="account">
          <uni-easyinput
            prefixIcon="phone"
            v-model="username"
            placeholder="请输入手机号"
            placeholderStyle="font-size:14px;"
            :inputBorder="false"
          />
        </view>
        <view class="password">
          <uni-easyinput
            prefixIcon="locked"
            v-model="password"
            :maxlength="20"
            placeholder="请输入新密码"
            placeholderStyle="font-size:14px;"
            type="password"
            :inputBorder="false"
            :styles="{ color: '#333' }"
          />
        </view>
        <view class="password">
          <uni-easyinput
            prefixIcon="compose"
            v-model="smscode"
            placeholder="请输入验证码"
            placeholderStyle="font-size:14px;"
            type="number"
            :maxlength="6"
            :inputBorder="false"
            :styles="{ color: '#333' }"
          />
          <button v-show="!showTime" @click="getSmsCode()">获取验证码</button>
          <button v-show="showTime">{{ time }} s</button>
        </view>
      </view>
      <view class="submit">
        <button @click="resetPassword()">重置密码</button>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
  import { onBeforeUnmount, reactive, ref } from 'vue';
  import AsterBack from '@/components/common/aster-back.vue';
  import { onLoad } from '@dcloudio/uni-app';
  import { sendCode, reset } from '@/services/api/user/login';
  import { LoginParamModel } from '@/services/model/loginModel';
  import { isEmpty } from '@/utils/is';
  import { Toast } from '@/utils/uniapi/prompt';
  import { router } from '@/utils/router';
  import { encryptByMd5 } from '@/utils/cipher';
  import config from '@/utils/config';
  import { ResultEnum } from '@/enums/httpEnum';

  /** 用户名 */
  const username = ref<string>('');
  /** 密码 */
  const password = ref<string>('');
  /** 验证码 */
  const smscode = ref<string>('');
  /** 显示验证码倒计时 */
  const showTime = ref<boolean>(false);
  /** 验证码倒计时 */
  const time = ref<number>(60);
  const timer = ref();
  /** 待提交参数 */
  const queryParams = reactive<LoginParamModel>({
    username: username.value,
    password: password.value,
    smscode: smscode.value,
  });

  /** 获取验证码 */
  const getSmsCode = () => {
    if (isEmpty(username.value)) {
      Toast('请输入手机号');
      return;
    }
    sendCode(username.value).then(({ data }) => {
      if (data.code == ResultEnum.SUCCESS) {
        showTime.value = true;
        setIntervalFun();
      } else {
        Toast(data.message);
      }
    });
  };

  /** 重置密码 */
  const resetPassword = () => {
    let validate = validateForm();
    if (!validate) return;
    // 密码加密
    queryParams.password = encryptByMd5(password.value);
    reset(queryParams).then(({ data }) => {
      if (data.code == ResultEnum.SUCCESS) {
        Toast('重置密码成功！即将跳转之登录页');
        timer.value = setInterval(() => {
          router.replace(config.route.login);
        }, 1500);
      } else {
        Toast(data.message);
      }
    });
  };
  /** 表单校验 */
  const validateForm = () => {
    if (isEmpty(username.value)) {
      Toast('请输入手机号');
      return false;
    }
    if (isEmpty(password.value)) {
      Toast('请输入密码');
      return false;
    }
    if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z\\W]{6,20}$/.test(password.value)) {
      Toast('密码必须包含字母和数字，且在6-20位之间', { duration: 2500 });
      return false;
    }
    if (isEmpty(smscode.value)) {
      Toast('请输入验证码');
      return false;
    }
    return true;
  };

  /** 添加定时器 */
  const setIntervalFun = () => {
    let interval = setInterval(function () {
      time.value--;
      uni.setStorage({
        key: 'resetpwd_time',
        data: {
          time: time.value,
          date: new Date().getTime(),
        },
        success: function () {},
      });
      if (time.value <= 0) {
        clearInterval(interval);
        showTime.value = false;
        time.value = 60;
      }
    }, 1000);
  };

  onLoad(() => {
    console.log('page is load');
    uni.getStorage({
      key: 'resetpwd_time',
      success: function (res) {
        let difDate = (new Date().getTime() - res.data.date) / 1000;
        if (res.data.time - Math.round(difDate) > 0) {
          time.value = res.data.time - Math.round(difDate);
          showTime.value = true;
          setIntervalFun();
        } else {
          showTime.value = false;
          time.value = 60;
          uni.setStorage({
            key: 'resetpwd_time',
            data: {
              time: 0,
              date: new Date().getTime(),
            },
            success: function () {},
          });
        }
      },
      complete: (res) => {
        console.log(res, 'loadcomplete');
      },
    });
  });
  /** 页面销毁前清除定时器 */
  onBeforeUnmount(() => {
    clearInterval(timer.value);
  });
</script>
<style lang="scss" scoped>
  page {
    background-color: #fff !important;
  }

  .resetpwd {
    color: #333;
    padding: 0 66rpx 0;
    position: relative;
    height: 100vh;
  }

  .resetpwd-header {
    width: 100%;
    margin-top: 60rpx;

    text {
      display: flex;
      justify-content: center;
      font-size: 40rpx;
      padding: 60rpx 0;
    }
  }

  .account {
    margin: 20rpx 0;
    border-bottom: 1px solid #bbb;
  }

  .password {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #bbb;
    margin: 20rpx 0;

    input {
      font-size: 32rpx;
    }

    button {
      width: 180rpx;
      color: #fff;
      display: inline-block;
      font-size: 28rpx;
      background-color: #ff6a6c;
      padding-left: 20rpx;
      padding-right: 20rpx;
    }
  }

  ::v-deep .uni-easyinput__content {
    background-color: unset !important;
  }

  .ua_xy {
    padding: 0 0 0 70rpx;
    line-height: 60rpx;
    position: relative;
    font-size: 24rpx;
  }
  .ua_xy .ck {
    width: 30rpx;
    height: 30rpx;
    border-radius: 100%;
    border: 1px solid #bbb;
    position: absolute;
    left: 20rpx;
    top: 14rpx;
  }
  .ua_xy .ckin {
    width: 24rpx;
    height: 24rpx;
    border-radius: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background: #00da9d;
    display: none;
  }
  .ua_xyhover .ckin {
    display: block;
  }
  .ua_xy .bn {
    display: inline-block;
    color: #00da9d;
    font-size: 26rpx;
    line-height: 56rpx;
  }

  .tooltip {
    display: inline-block;
    position: relative;
    z-index: 1;
    left: 0;
    background-color: #333;
    border-radius: 8px;
    color: #fff;
    font-size: 12px;
    text-align: left;
    line-height: 16px;
    padding: 12px;
  }

  .submit {
    margin: 30rpx 0;

    button {
      background-color: #ff6a6c;
      color: #fff;
      font-size: 32rpx;
    }
  }

  .divider {
    margin-top: 200rpx;
  }

  .other {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;

    .item {
      display: flex;
      flex-flow: column nowrap;
      align-items: center;
      color: #a5a5a5;
      padding: 0 20rpx;

      image {
        width: 60rpx;
        height: 60rpx;
        margin-bottom: 10rpx;
      }
    }
  }
</style>
